<script setup>
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import axios from "axios";
import { onMounted, ref } from "vue";

// 导入网站logo（保持导入但实际使用统一的SVG）
import siteLogo from '@/assets/logo.png'

onMounted(() => {
  getLocationByIP()
})

// 动态位置
const currentLocation = ref('📍 当前位置：加载中...')

// 获取当前位置（IP定位）
const getLocationByIP = async () => {
  try {
    const res = await axios.get('https://ipapi.co/json/')
    const { region, city } = res.data
    currentLocation.value = `📍 当前位置：${region || '未知'} ${city || '未知'}`
  } catch (err) {
    currentLocation.value = '📍 当前位置：无法获取'
    console.error('获取位置失败:', err)
  }
}

const router = useRouter();
const handleCommand = (command) => {
  if (command === 'logout') {
    ElMessageBox.confirm(
        '你确认要退出吗？',
        '温馨提示',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        }
    ).then(
        async () => {
          // userInfoStore.removeUserInfo()
          ElMessage.success("退出成功")
          await router.push('/userLoginPage')
        }
    )
  } else {
    router.push('/user/' + command)
  }
}
</script>

<template>
  <el-container class="layout-container">
    <!-- 顶部导航栏 -->
    <el-header>
      <nav class="top-nav">
        <!-- 位置信息 -->
        <div class="location">{{ currentLocation }}</div>

        <!-- Logo区域 -->
        <div class="logo-container" @click="$router.push('/user/recommendHomePage')">
          <!-- 与首页一致的对称式logo：对话气泡+单星星 -->
          <svg
              class="site-logo"
              viewBox="0 0 48 48"
              fill="none"
          >
            <!-- 外层对称气泡形状 -->
            <path d="M12 24C12 15.1634 19.1634 8 28 8C36.8366 8 44 15.1634 44 24C44 32.8366 36.8366 40 28 40C23.5817 40 19.5291 38.2426 16.5858 35.2993L12 40V24Z"
                  stroke="#2563EB" stroke-width="2.5" fill="#EFF6FF"/>

            <!-- 中央评分星星 -->
            <path d="M24 14L26.5 22L34 22L28 26.5L30 34L24 30L18 34L20 26.5L14 22L21.5 22L24 14Z"
                  fill="#2563EB"/>
          </svg>
          <span class="site-name">点评通</span>
        </div>
      </nav>
    </el-header>

    <el-main>
      <router-view/>
    </el-main>

    <el-footer>
      <!-- 底部导航栏（精简优化） -->
      <nav class="bottom-nav">
        <router-link to="/user/recommendHomePage" class="nav-item">
          <i class="fas fa-home"></i>
          <span>首页</span>
        </router-link>
        <router-link to="/user/DiscoveryPage" class="nav-item">
          <i class="fas fa-compass"></i>
          <span>发现</span>
        </router-link>
        <router-link to="/user/personalHomePage" class="nav-item">
          <i class="fas fa-user"></i>
          <span>我的</span>
        </router-link>
      </nav>
    </el-footer>
  </el-container>
</template>

<style lang="scss" scoped>
// 颜色变量（统一为主色调#2563EB）
$primary: #2563EB;
$primary-dark: #1D4ED8;
$primary-light: rgba(37, 99, 235, 0.1);
$text-primary: #1E293B;
$text-secondary: #64748B;
$shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
$transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

// 布局容器样式
.layout-container {
  height: 100vh;
  display: flex;
  flex-direction: column;

  .el-header {
    height: 68px;
    padding: 0;
  }

  .el-main {
    flex: 1;
    padding: 20px;
    margin-bottom: 20px; // 适配精简后的底部导航
  }

  .el-footer {
    height: 70px; // 高度精简
    padding: 0;
  }
}

// 顶部导航栏样式
.top-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 68px;
  background-color: white;
  box-shadow: $shadow;
  display: flex;
  align-items: center;
  padding: 0 22px;
  justify-content: space-between;
  z-index: 100;

  .location {
    font-size: 16px;
    color: $text-primary;
    padding: 7px 14px;
    border-radius: 18px;
    background-color: #f5f7fa;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: $transition;
    font-weight: 500;

    &:hover {
      background-color: #eef2f7;
      transform: translateY(-2px) scale(1.02);
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
    }

    &:active {
      transform: translateY(0) scale(1);
    }
  }

  .logo-container {
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    transition: $transition;

    &:hover {
      transform: translateY(-2px) scale(1.05);
    }

    &:active {
      transform: translateY(0) scale(1.02);
    }

    .site-logo {
      width: 44px;
      height: 44px;
      object-fit: contain;
      border-radius: 9px;
      box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15);
      transition: $transition;

      &:hover {
        transform: rotate(5deg) scale(1.05);
        filter: drop-shadow(0 0 8px rgba(37, 99, 235, 0.4));
      }
    }

    .site-name {
      font-size: 21px;
      font-weight: 600;
      background: linear-gradient(90deg, $primary, $primary-dark);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
  }
}

// 底部导航栏（核心优化：移除多余元素，强化交互）
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 70px; // 精简高度
  display: flex;
  justify-content: space-around;
  background-color: white;
  box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.05); // 阴影精简
  z-index: 100;
  padding: 8px 0; // 内边距精简

  .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #888;
    font-size: 16px; // 字体适中
    width: 90px; // 点击区域精简
    height: 100%;
    transition: $transition;
    position: relative;

    // 核心优化：移除多余的icon-bg元素，用伪元素实现背景
    &::before {
      content: '';
      position: absolute;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: transparent;
      transition: $transition;
      z-index: 0;
    }

    i {
      font-size: 22px; // 图标尺寸精简
      margin-bottom: 5px;
      transition: $transition;
      position: relative;
      z-index: 1;
    }

    span {
      position: relative;
      z-index: 1;
      transition: $transition;
    }

    // 选中状态优化
    &.router-link-active {
      color: $primary;

      &::before {
        background-color: $primary-light;
        transform: scale(1.05);
        box-shadow: 0 3px 12px rgba(37, 99, 235, 0.2);
      }

      i {
        color: $primary;
        transform: translateY(-4px) scale(1.1); // 动画精简但更流畅
        text-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
      }

      span {
        font-weight: 600;
        transform: translateY(-2px);
      }
    }

    // 未选中hover优化
    &:hover:not(.router-link-active) {
      color: $primary-dark;

      &::before {
        background-color: rgba(37, 99, 235, 0.07);
        transform: scale(0.9);
      }

      i {
        color: $primary-dark;
        transform: translateY(-3px);
      }

      span {
        transform: translateY(-1px);
      }
    }

    // 点击反馈
    &:active {
      &::before {
        transform: scale(0.95);
      }
    }
  }
}

// 响应式适配
@media (max-width: 480px) {
  .top-nav {
    padding: 0 16px;

    .location {
      font-size: 15px;
    }

    .site-name {
      font-size: 19px;
    }
  }

  .bottom-nav {
    height: 65px;

    .nav-item {
      width: 80px;
      font-size: 15px;

      i {
        font-size: 20px;
      }

      &::before {
        width: 46px;
        height: 46px;
      }
    }
  }

  .el-main {
    margin-bottom: 65px;
  }
}
</style>